<template>
	<view>
		<view class="navigator-bar">
			<view class="search-input">
				<input placeholder="请输入教师Id查询" type="number" v-model="identifier" @input="searchUser" />
				<span class="iconfont iconsousuo--"></span>
			</view>
			<view class="cancle" @tap="cancleSearch">
				取消
			</view>
		</view>
		<view class="teacher-list"v-if="showInvite">
			<view class="teacher-picture">
				<image :src="inviteMsg.avatar"></image>
			</view>
			<view class="teacher-name">{{inviteMsg.nicheng}}</view>
			<view class="invite" :class="inviteMsg.apply_state == 1 || inviteMsg.apply_state == 0 ? 'invited' : ''" @tap="invite(inviteMsg.user_id)">
				<text v-if="inviteMsg.apply_state == 0">待通过</text>
				<text v-if="inviteMsg.apply_state == 1">已邀请</text>
				<text v-if="inviteMsg.apply_state == 2">已拒绝</text>
				<text v-else>邀请</text>
			</view>
		</view>
		<!-- <view class="teacher-list" v-for="(item,index) in inviteList" :key="index" v-if="showInviteList">
			<view class="teacher-picture">
				<image :src="item.avatar"></image>
			</view>
			<view class="teacher-name">{{item.nicheng}}</view>
			<view class="invite" :class="item.apply_state == 1 ? 'invited' : ''" @tap="invite(index)">
				{{item.member_type == 1 ? '已邀请' : '邀请'}}
			</view>
		</view> -->
		<view class="zanwu" v-if="showInvite == false">暂无可邀请教师</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identifier: null,
				inviteMsg: null,
				showInvite: false,
				student_id: 0,
				classroom_id: 0
			}
		},
		onLoad(e) {
			this.student_id = e.student_id
			this.classroom_id = e.classroom_id
		},
		methods: {
			// 用户输入用户Id自动搜索
			searchUser: function() {
				var data = {
					identifier: this.identifier,
					classroom_id: this.classroom_id
				}
				if (this.classroom_id) {
					this.$zapi.apiPost('user/currency.basic/GetUserInfoByIdentifier', data).then(res => {
							if (res.data.code == 200) {
							this.inviteMsg = res.data.data
							this.inviteMsg.apply_state = parseInt(this.inviteMsg.apply_state)
							this.showInvite = true
						} else {
						}
					})
				}
			},
			// 用户点击取消清空搜索栏
			cancleSearch: function() {
				this.identifier = ''
				this.inviteMsg = null
				this.showInvite = false
			},
			// 邀请
			invite: function(user_id) {
				console.log(this.inviteMsg)
				if (this.inviteMsg.apply_state != 0 && this.inviteMsg.apply_state != 1) {
					let content = '确定邀请该用户？'
					if (this.inviteMsg.apply_state == 2) {
						content = '确定再次邀请该用户？'
					}
					uni.showModal({
						title: '邀请用户',
						content: content,
						success: (res) => {
							if (res.confirm) {
								this.$zapi.apiPost('user/Grade.User/invitationclassroom', {
									classroom_id: this.classroom_id,
									user_id: user_id
								}).then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: res.data.msg
										})
										this.searchUser()
									}
								})
							}
						}
					})
				} else {
					console.log('this user is aready benn invited')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/** 头部搜索框*/
	.navigator-bar {
		width: 100%;
		height: 88upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background: #FF9900;

		.search-input {
			width: 538upx;
			height: 52upx;
			position: relative;

			input {
				width: 100%;
				height: 100%;
				background: #FFF;
				border-radius: 10upx;
				font-size: 30upx;
				color: #333;
				padding-left: 66upx;
			}

			.iconsousuo-- {
				position: absolute;
				top: -30upx;
				left: 10upx;
				font-size: 60upx;
				color: #CCCCCC;
			}
		}

		.cancle {
			font-size: 30upx;
			margin-left: 22upx;
			color: #fff;
		}
	}

	/** 教师信息列表*/
	.teacher-list {
		height: 48upx;
		margin: 46upx 30upx 40upx 60upx;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;

		.teacher-picture {
			width: 60upx;
			height: 60upx;
			background-image: url(../../../static/image/user-center-logo-app.png);
			background-size: 100%;
			border-radius: 30upx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 30upx;
			}
		}

		.teacher-name {
			margin-left: 20upx;
			font-size: 32upx;
			color: #333;
		}

		.invite {
			width: 88upx;
			height: 100%;
			background: #FF9900;
			text-align: center;
			font-size: 26upx;
			color: #FFF;
			border-radius: 24upx;
			margin-left: auto;
		}

		.invited {
			background: #CCCCCC;
		}
	}

	.zanwu {
		position: absolute;
		width: 100%;
		font-size: 60upx;
		top: 30%;
		color: #c1b5c2;
		text-align: center;
	}
</style>
